<!--
 * Quarterly report generator.
 *
 * ParkingIQ Project.
 *
 * (c) 2011 Aditya Sawhney
 * This code may be freely used and modified for any purpose. 
-->
 
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">
var map = null;
var marker = null;
var city = 'Boulder, CO';
var serverUrl = 'localhost:8000';

// Create the map with Boulder as default location.
function initMap() {
	geocoder = new google.maps.Geocoder();
	geocoder.geocode({ address: city }, function(results, status) {
		drawMap(results, status)
	});
}

// Draw map based on the location determined by geo-coder.
// Also, creates global instances for map and marker.
function drawMap(vresults, vstatus) {
	if (vstatus == google.maps.GeocoderStatus.OK) {
		if (vresults[0]) {
			var latlng = new google.maps.LatLng(
				vresults[0].geometry.location.lat(), 
				vresults[0].geometry.location.lng());
			var myOptions = {
			  zoom: 10,
			  center: latlng,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			marker = new google.maps.Marker({map: map});
			setMarker(latlng, city);
		}
		else {
			alert ('no returns of geocoder request');
		}
	}
	else {
		alert ('geocoder request error');
	}
}

// Relocate the markers based on given location
function setMarker(latlng, title) {
	marker.setPosition(latlng);
    marker.setTitle(title);
    map.setCenter(latlng);
}

// Generate the report
// - Call ParkingIQ server for data based on user specified quarter and lot.
// - Extract and compile the data to in google charting service format
// - Display the chart retrieved from Google
// - Relocate the marker to point to the parking lot
function getReport() {
	var quarter = document.getElementById('quarter').value;
	var lotid = document.getElementById('lot').value;
	var url = 'http://' + serverUrl + '/reports/quarterly/' + lotid + '/?quarter=' + quarter;
	var req = new XMLHttpRequest();

	req.open('GET', url, true);
	req.onreadystatechange = function (aEvt) { // Asynch execution
		if (req.readyState == 4) {
		  if (req.status == 200) {
			var jResponse = JSON.parse(req.responseText);
			var latlng = new google.maps.LatLng(
				jResponse.parkingLotInfo.latitude, 
				jResponse.parkingLotInfo.longitude);
			var title = 'Lot ID: ' + jResponse.parkingLotInfo.lotId 
					+ '  Type: ' + jResponse.parkingLotInfo.type;
			var chartData = computeChartData(jResponse);
			var chartNode = '<img src="http://chart.apis.google.com/chart?'
				+ 'chxl=1:|Friday|Thursday|Wednesday|Tuesday|Monday'
				+ '&chxt=x,y'
				+ '&chbh=a,10'
				+ '&chs=440x220'
				+ '&cht=bhs'
				+ '&chco=4D89F9,80C65A,FF9900'
				+ '&chdl=Morning|Afternoon|Evening'
				+ '&chma=10,10,10,10'
				+ '&chtt=Daily+average+space+availability' 
				+ '&' + chartData 
				+ '" />';
			document.getElementById('img_holder').innerHTML = chartNode;
			setMarker(latlng, title);
			map.setZoom(15);
		   }
		   else {
			   alert ('AJAX request error');
			}
		}
	};
	req.send(null);
}

// Extract the data from JSON response and compile it for consumption
// by Google charting service.
function computeChartData(jResponse) {
	var i, m_m, m_a, m_e, tu_m, tu_a, tu_e, w_m, w_a, w_e, th_m, th_a, th_e, f_m, f_a, f_e;

	for (i = 0; i < jResponse.weekReports.entry.length; i = i + 1) {
		jDay = jResponse.weekReports.entry[i];
		if (jDay.key == 'MONDAY') {
			m_m = jDay.value.morningSpaceCount;
			m_a = jDay.value.afternoonSpaceCount;
			m_e = jDay.value.eveningSpaceCount;
		}
		else if (jDay.key == 'TUESDAY') {
			tu_m = jDay.value.morningSpaceCount;
			tu_a = jDay.value.afternoonSpaceCount;
			tu_e = jDay.value.eveningSpaceCount;
		}
		else if (jDay.key == 'WEDNESDAY') {
			w_m = jDay.value.morningSpaceCount;
			w_a = jDay.value.afternoonSpaceCount;
			w_e = jDay.value.eveningSpaceCount;
		}
		else if (jDay.key == 'THURSDAY') {
			th_m = jDay.value.morningSpaceCount;
			th_a = jDay.value.afternoonSpaceCount;
			th_e = jDay.value.eveningSpaceCount;
		}
		else if (jDay.key == 'FRIDAY') {
			f_m = jDay.value.morningSpaceCount;
			f_a = jDay.value.afternoonSpaceCount;
			f_e = jDay.value.eveningSpaceCount;
		}
	}
	
	var mData = m_m + ',' + tu_m + ',' + w_m + ',' + th_m + ',' + f_m;
	var aData = m_a + ',' + tu_a + ',' + w_a + ',' + th_a + ',' + f_a;
	var eData = m_e + ',' + tu_e + ',' + w_e + ',' + th_e + ',' + f_e;
	bound = Math.max(m_m, m_a, m_e, tu_m, tu_a, tu_e, w_m, w_a, w_e, th_m, th_a, th_e, f_m, f_a, f_e) * 3;
	
	return 	'chd=t:' + mData + '|' + aData + '|' + eData 
		  + '&chxr=0,0,' + bound
		  + '&chds=0,' + bound + ',0,' + bound + ',0,' + bound;
}
</script>
</head>

<!-- UI presentation layer -->
<body onload="initMap()">
	<h1>ParkingIQ<sup style="font-size:small">TM</sup> Quarterly Report</h1>
	<!-- Collect parameters from user -->
	<div>
		<!-- Quarter -->
		<p>
			<span>Quarter:</span>
			<select id="quarter">
			  <option value="fall_2010">Fall 2010</option>
			</select>
		</p>
		<!-- Parking lot Id -->
		<p>
			<span>Parking Lot:</span>
			<select id="lot">
			  <option>201</option>
			  <option>203</option>
			  <option>205</option>
			  <option>207</option>
			  <option>250</option>
			  <option>304</option>
			  <option>305</option>
			  <option>306</option>
			  <option>309</option>
			  <option>317</option>
			  <option>319</option>
			  <option>353</option>
			  <option>354</option>
			  <option>359</option>
			  <option>368</option>
			  <option>377</option>
			  <option>381</option>
			  <option>391</option>
			  <option>394</option>
			  <option>400</option>
			  <option>404</option>
			  <option>415</option>
			  <option>421</option>
			  <option>423</option>
			  <option>437</option>
			  <option>440</option>
			  <option>448</option>
			  <option>457</option>
			  <option>459</option>
			  <option>461</option>
			  <option>465</option>
			  <option>472</option>
			  <option>473</option>
			  <option>474</option>
			  <option>475</option>
			</select>
			<!-- Trigger for report generation -->
			<button onclick="getReport();" type="button">Get Report</button>
		</p>
	</div>

	<!-- Map -->
	<div id="map_canvas" style="width:25%; height:30%; margin:20px"></div>
	<!-- Chart/Report -->
	<div id="img_holder" style="border:2px; padding:2px; margin:10px;"></div>
</body>
</html>
